<template>



  <div style="display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color:rgb(var(--v-theme-surface));">
    
    <!-- Calendar -->
    <div style="flex: 1 1 24%; overflow: auto;">
      <Calendar
        monFirst
        :select-date="today"
        selectMode="select"
        mode="week"
        :lunar="lunar"
        :holidays="holidays"
        ref="weekModeRef"
        language="cn"
        @onSelect="selectDate"
        style="width: 100%;"
        @next="test"
        @prev="test"
      />
    </div>
    
    <!-- Divider -->
    <v-divider></v-divider>
    
    <!-- 手填数据 -->
    <div style="flex: 1 1 6%; overflow: auto;">
      <v-row
        style="padding-top: 5px; padding-left: 5px;"
        no-gutters
      >
        <v-col key="1">
          <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
            工作时长：<input
              type="number"
              v-model="workTime"
              placeholder="工时"
              placeholder-class="input-placeholder"
              style="max-width: 60px;"
              @keyup.enter="saveTime"
            />
          </div>
        </v-col>

        <v-col key="2">
          <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
            绩效：<input
              type="number"
              v-model="workNum"
              placeholder="绩效"
              placeholder-class="input-placeholder"
              style="max-width: 60px;"
              @keyup.enter="saveNum"
            />
          </div>
        </v-col>
      </v-row>
    </div>

    <!-- 关键指标显示区 -->
    <div style="flex: 1 1 12%; overflow: hidden;">
      <v-divider></v-divider>
      <v-row
        class="metrics"
        style="padding-top: 5px; padding-left: 5px;"
        no-gutters
      >
        <v-col key="1">
          <div class="metric">
              <div class="value">{{ ageing }}</div>
              <div class="label">时效</div>
          </div>
        </v-col>

        <v-col key="2">
          <div class="metric">
              <div class="value">{{variablePay + basePay}}/h</div>
              <div class="label">对应时薪</div>
          </div>
        </v-col>

        <v-col key="3">
          <div class="metric">
              <div class="value">{{totalPay}}元</div>
              <div class="label">日薪</div>
          </div>
        </v-col>
      </v-row>
    </div>

    <!-- 浮动薪资部分 -->
    <div style="flex: 1 1 38%; overflow: auto;">
      <v-divider @click="setup">浮动薪资 {{ typePaySelect.title }} <v-icon icon="mdi-cog" /> </v-divider>
      <v-table density="compact" style="height: 75%;">
        <thead>
          <tr>
            <th class="text-left">
              周分拣综合时效
            </th>
            <th class="text-left">
              浮点时薪
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in wageRange"
            :key="item.formDt"
          >
            <td>{{ item.formDt + "~" + item.toDt }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </tbody>
      </v-table>

      <!-- 回到当天按钮 -->
      <v-fab
        absolute
        location="right center"
        @click="backToToday"
      >
        回到当天
      </v-fab>
    </div>



    <!-- 周薪部分 -->
    <div style="flex: 1 1 29%; overflow: auto;">
      <v-divider>周薪</v-divider>
      <v-row
        class="metrics1"
        style="padding-top: 5px; padding-left: 5px;"
        no-gutters
      >
        <v-col key="1">
          <div class="metric">
              <div class="value">{{ weekWorkTime }}</div>
              <div class="label">周工时</div>
          </div>
        </v-col>

        <v-col key="1">
          <div class="metric">
              <div class="value">{{ weekAgeing }}</div>
              <div class="label">周时效</div>
          </div>
        </v-col>

        <v-col key="2">
          <div class="metric">
              <div class="value">{{weekVariablePay + basePay}}/h</div>
              <div class="label">周时薪</div>
          </div>
        </v-col>

        <v-col key="3">
          <div class="metric">
              <div class="value">{{weekTotalPay}}元</div>
              <div class="label">周薪</div>
          </div>
        </v-col>
      </v-row>
      
      <v-divider v-if="forecast">模拟 增加工时{{ Number((forecastWeekWorkTime - weekWorkTime).toFixed(2)) }}</v-divider>
      
      <v-row
        class="metrics1"
        style="padding-top: 5px; padding-left: 5px;"
        no-gutters
      >
        <v-col key="1">
          <div class="metric">
              <div class="value">{{ forecastWeekWorkTime }}</div>
              <div class="label">工时</div>
          </div>
        </v-col>

        <v-col key="1">
          <div class="metric">
              <div class="value">{{ forecastWeekAgeing }}</div>
              <div class="label">时效</div>
          </div>
        </v-col>

        <v-col key="2">
          <div class="metric">
              <div class="value">{{forecastVariablePay + basePay}}/h</div>
              <div class="label">时薪</div>
          </div>
        </v-col>

        <v-col key="3">
          <div class="metric">
              <div class="value">{{forecastWeekTotalPay}}元</div>
              <div class="label">工资</div>
          </div>
        </v-col>
      </v-row>
    </div>

  </div>


  <v-overlay v-model="setVariablePay" style="display:flex;justify-content: center; align-items:center;">
    <v-card variant="elevated" style="width: 260px; height: 420px; overflow-y: auto;" >
      <v-select
        v-model="typePaySelect"
        :item-props="itemProps" 
        :items="typePayRange"  
        width="100%"
        persistent-hint
        return-object
        single-line
       ></v-select>

       <div style="padding-left: 13px;">
        基础薪资：<input
            type="number"
            v-model="basePay"
            placeholder="基础薪资"
            placeholder-class="input-placeholder"
            style="max-width: 150px;"
            @keyup.enter="saveTime"
          />
       </div>


       <v-table density="compact" height="330px">
          <thead>
            <tr>
              <th class="text-left">
                周分拣综合时效
              </th>
              <th class="text-left">
                浮点时薪
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in wageRange"
              :key="item.formDt"
            >
              <td>{{ item.formDt + "~" + item.toDt }}</td>
              <td>{{ item.price }}</td>
            </tr>
          </tbody>
        </v-table>
    </v-card>

  </v-overlay>
</template>


<script lang="ts" setup>
import { nextTick, onBeforeMount, Ref, ref, watch } from 'vue'
import lunar from 'mpvue-calendar/dist/lunar'
import Calendar from 'mpvue-calendar'
import { invoke } from '@tauri-apps/api/core';
import * as path from '@tauri-apps/api/path';

const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth() + 1;
const currentDay = currentDate.getDate();
const weekModeRef = ref();
const today = ref(`${currentYear}-${currentMonth}-${currentDay}`);
const holidays = ref({
  [`${currentYear}-${currentMonth}-${currentDay}`]: "今天"
});

//工时
const workTime = ref(0);
//绩效
const workNum = ref(0);
//时效
const ageing = ref(0);
//基础薪资
const basePay = ref(18.7);
//浮动薪资
const variablePay = ref(0);
//总薪资
const totalPay = ref(0);


//工时
const weekWorkTime = ref(0);
//绩效
const weekWorkNum = ref(0);
//时效
const weekAgeing = ref(0);
//浮动薪资
const weekVariablePay = ref(0);
//总薪资
const weekTotalPay = ref(0);

//预测工时
const forecastWeekWorkTime = ref(0);
//时效
const forecastWeekAgeing = ref(0);
//预测浮动薪资
const forecastVariablePay = ref(0);
//总薪资
const forecastWeekTotalPay = ref(0);

//预测
const forecast = ref(true);
//设置
const setVariablePay = ref(false);

const weeks: Ref<Array<string>> = ref([]);

const rangePay = ref({
  "f_1_2_15_x": [
    {"id":1, "formDt": 0, "toDt": 23, "price": 0, "equal": "formDt"},
    {"id":1, "formDt": 23, "toDt": 25, "price": 0.5, "equal": "formDt"},
    {"id":1, "formDt": 25, "toDt": 27, "price": 0.8, "equal": "formDt"},
    {"id":1, "formDt": 27, "toDt": 29, "price": 1.2, "equal": "formDt"},
    {"id":1, "formDt": 29, "toDt": 31, "price": 1.6, "equal": "formDt"},
    {"id":1, "formDt": 31, "toDt": 33, "price": 2, "equal": "formDt"},
    {"id":1, "formDt": 33, "toDt": 35, "price": 3, "equal": "formDt"},
    {"id":1, "formDt": 35, "toDt": 37, "price": 4, "equal": "formDt"},
    {"id":1, "formDt": 37, "toDt": 39, "price": 5, "equal": "formDt"},
    {"id":1, "formDt": 39, "toDt": 41, "price": 6, "equal": "formDt"},
    {"id":1, "formDt": 41, "toDt": 43, "price": 7, "equal": "formDt"},
    {"id":1, "formDt": 43, "toDt": 1000, "price": 8, "equal": "formDt"}
  ],
  "f_1_2_15_s": [
    {"id":1, "formDt": 0, "toDt": 23, "price": 0, "equal": "formDt"},
    {"id":1, "formDt": 23, "toDt": 25, "price": 1, "equal": "formDt"},
    {"id":1, "formDt": 25, "toDt": 27, "price": 1.5, "equal": "formDt"},
    {"id":1, "formDt": 27, "toDt": 29, "price": 2, "equal": "formDt"},
    {"id":1, "formDt": 29, "toDt": 31, "price": 3, "equal": "formDt"},
    {"id":1, "formDt": 31, "toDt": 33, "price": 4, "equal": "formDt"},
    {"id":1, "formDt": 33, "toDt": 35, "price": 5, "equal": "formDt"},
    {"id":1, "formDt": 35, "toDt": 37, "price": 6, "equal": "formDt"},
    {"id":1, "formDt": 37, "toDt": 39, "price": 7, "equal": "formDt"},
    {"id":1, "formDt": 39, "toDt": 41, "price": 8, "equal": "formDt"},
    {"id":1, "formDt": 41, "toDt": 43, "price": 9, "equal": "formDt"},
    {"id":1, "formDt": 43, "toDt": 1000, "price": 10, "equal": "formDt"}
  ],
  "f_3_x": [
    {"id":1, "formDt": 0, "toDt": 28, "price": 0, "equal": "formDt"},
    {"id":1, "formDt": 28, "toDt": 30, "price": 0.5, "equal": "formDt"},
    {"id":1, "formDt": 30, "toDt": 32, "price": 0.8, "equal": "formDt"},
    {"id":1, "formDt": 32, "toDt": 34, "price": 1.3, "equal": "formDt"},
    {"id":1, "formDt": 34, "toDt": 36, "price": 1.7, "equal": "formDt"},
    {"id":1, "formDt": 36, "toDt": 38, "price": 2.5, "equal": "formDt"},
    {"id":1, "formDt": 38, "toDt": 40, "price": 3, "equal": "formDt"},
    {"id":1, "formDt": 40, "toDt": 42, "price": 4, "equal": "formDt"},
    {"id":1, "formDt": 42, "toDt": 44, "price": 5, "equal": "formDt"},
    {"id":1, "formDt": 44, "toDt": 46, "price": 6, "equal": "formDt"},
    {"id":1, "formDt": 46, "toDt": 48, "price": 7, "equal": "formDt"},
    {"id":1, "formDt": 48, "toDt": 1000, "price": 8, "equal": "formDt"}
  ],
  "f_3_s": [
    {"id":1, "formDt": 0, "toDt": 32, "price": 0, "equal": "formDt"},
    {"id":1, "formDt": 32, "toDt": 34, "price": 0.5, "equal": "formDt"},
    {"id":1, "formDt": 34, "toDt": 36, "price": 0.8, "equal": "formDt"},
    {"id":1, "formDt": 36, "toDt": 38, "price": 1.3, "equal": "formDt"},
    {"id":1, "formDt": 38, "toDt": 40, "price": 1.7, "equal": "formDt"},
    {"id":1, "formDt": 40, "toDt": 42, "price": 2.5, "equal": "formDt"},
    {"id":1, "formDt": 42, "toDt": 44, "price": 3, "equal": "formDt"},
    {"id":1, "formDt": 44, "toDt": 46, "price": 4, "equal": "formDt"},
    {"id":1, "formDt": 46, "toDt": 48, "price": 5, "equal": "formDt"},
    {"id":1, "formDt": 48, "toDt": 50, "price": 6, "equal": "formDt"},
    {"id":1, "formDt": 50, "toDt": 52, "price": 7, "equal": "formDt"},
    {"id":1, "formDt": 52, "toDt": 1000, "price": 8, "equal": "formDt"}
  ],
  "q": [
    {"id":1, "formDt": 0, "toDt": 32, "price": 0, "equal": "formDt"},
    {"id":1, "formDt": 32, "toDt": 34, "price": 0.5, "equal": "formDt"},
    {"id":1, "formDt": 34, "toDt": 36, "price": 1, "equal": "formDt"},
    {"id":1, "formDt": 36, "toDt": 38, "price": 1.5, "equal": "formDt"},
    {"id":1, "formDt": 38, "toDt": 40, "price": 2, "equal": "formDt"},
    {"id":1, "formDt": 40, "toDt": 42, "price": 3, "equal": "formDt"},
    {"id":1, "formDt": 42, "toDt": 44, "price": 4, "equal": "formDt"},
    {"id":1, "formDt": 44, "toDt": 46, "price": 5, "equal": "formDt"},
    {"id":1, "formDt": 46, "toDt": 48, "price": 6, "equal": "formDt"},
    {"id":1, "formDt": 48, "toDt": 50, "price": 7, "equal": "formDt"},
    {"id":1, "formDt": 50, "toDt": 52, "price": 8, "equal": "formDt"},
    {"id":1, "formDt": 52, "toDt": 54, "price": 9, "equal": "formDt"},
    {"id":1, "formDt": 54, "toDt": 1000, "price": 10, "equal": "formDt"}
  ]
});

const emit = defineEmits(["saveTypePaySelect", "saveRangePay", "saveBasePay"])

const props = defineProps<{
  typePaySelect: { code: string, title: string }
  rangePay: any
  basePay: number
}>()



function itemProps (item: { title: any; code: any; }) {
  return {
    title: item.title,
    subtitle: item.code,
  }
}
//薪资类型
const typePaySelect = ref({
  code :"f_3_s",
  title : "非优速（大于3周）"
});

const typePayRange = ref([
  {
    "code":"f_1_2_15_x",
    "title": "非优速（第1、2周）出勤小于15"
  },
  {
    "code":"f_1_2_15_s",
    "title": "非优速（第1、2周）出勤大于15"
  },
  {
    "code":"f_3_x",
    "title": "非优速（第3周）"
  },
  {
    "code":"f_3_s",
    "title": "非优速（大于3周）"
  },
  {
    "code":"q",
    "title": "全月优速"
  },
]);

const wageRange: Ref<Array<any>> = ref([]);

function changeRange(type: string) {
  if(type) {
    if (type == "f_1_2_15_x") {
      wageRange.value = rangePay.value["f_1_2_15_x"];
    } else if (type == "f_1_2_15_s") {
      wageRange.value = rangePay.value["f_1_2_15_s"];
    } else if (type == "f_3_x") {
      wageRange.value = rangePay.value["f_3_x"];
    } else if (type == "f_3_s") {
      wageRange.value = rangePay.value["f_3_s"];
    } else if (type == "q") {
      wageRange.value = rangePay.value["q"];
    } else {
      console.log("没有匹配到！")
    }
  } else {
    console.log("没有匹配到222！")
  }
}

onBeforeMount(async () => {
  const home = await path.appDataDir();
  await invoke("init_sql_pool", { "path" : home });
  let info: any = await invoke("get_info_by_date", { "date" : today.value });
  if (info.is_success) {
    if (info.data) {
      workTime.value = info.data.work_time;
      workNum.value = info.data.work_num;
    }
  }
  //let data = await getCacheFile()
  //if (data) {
  //    // 转成json字符串并格式化
  //    let json: any = JSON.parse(data);
  //    typePaySelect.value = props.typePaySelect;
  //    rangePay.value = props.rangePay;
  //    basePay.value = props.basePay;
  //}
  typePaySelect.value = props.typePaySelect;
  rangePay.value = props.rangePay;
  basePay.value = props.basePay;
  changeRange(typePaySelect.value.code);

  weeks.value = getWeeks(currentYear.toString(), currentMonth.toString(), currentDay.toString());
  /////if (weekVariablePay.value == 0) {
  /////  await forecastWeek();
  /////}

  ageing.value = workTime.value == 0 ? 0 : Number((workNum.value/workTime.value).toFixed(2));
  variablePay.value = variable(ageing.value);
  totalPay.value = Number((workTime.value * (variablePay.value + basePay.value)).toFixed(2));
})
watch(workTime, async (_1, _2) => {
  if (!workTime.value) {
    workTime.value = 0;
  }
  console.log(workTime.value);
  ageing.value = workTime.value == 0 ? 0 : Number((workNum.value/workTime.value).toFixed(2));
  variablePay.value = variable(ageing.value);
  totalPay.value = Number((workTime.value * (variablePay.value + basePay.value)).toFixed(2));
  await invoke("update_ageing", { "date" : today.value, workTime: workTime.value, workNum: workNum.value });
  /////if (watchUpWeekInfo) {
  /////  await forecastWeek();
  /////}
})

watch(workNum, async (_1, _2) => {
  if (!workNum.value) {
    workNum.value = 0;
  }
  ageing.value = workTime.value == 0 ? 0 : Number((workNum.value/workTime.value).toFixed(2));
  variablePay.value = variable(ageing.value);
  totalPay.value = Number((workTime.value * (variablePay.value + basePay.value)).toFixed(2));
  await invoke("update_ageing", { "date" : today.value, workTime: workTime.value, workNum: workNum.value });
  /////if (watchUpWeekInfo) {
  /////  await forecastWeek();
  /////}
})

// Watch for changes to `typePaySelect`
watch(typePaySelect, async (_1, _2) => {
  changeRange(typePaySelect.value.code);
}, { deep: true });  // `deep: true` to watch changes within the object itself

watch(weeks, async (old, ne) => {
  if (arraysAreEqual(old, ne)) return;
  console.log("----week change----")
  console.log(old);
  console.log(ne)
  console.log("----week change----")
  await forecastWeek();
}, {deep: true});

watch(setVariablePay, async (_1, _2) => {
  changeRange(typePaySelect.value.code)

  emit("saveTypePaySelect", typePaySelect.value);

  //saveCacheFile(JSON.stringify({typePaySelect: typePaySelect.value, rangePay: rangePay.value, basePay: basePay.value}))
  /////await forecastWeek();
  ageing.value = workTime.value == 0 ? 0 : Number((workNum.value/workTime.value).toFixed(2));
  variablePay.value = variable(ageing.value);
  totalPay.value = Number((workTime.value * (variablePay.value + basePay.value)).toFixed(2));
})

function arraysAreEqual(arr1: string[], arr2: string[]) {
  if (arr1.length !== arr2.length) return false;
  return arr1.every((val, index) => val === arr2[index]);
}

function variable(ageingTemp: number) {
  for (let i in wageRange.value) {
    let data: any = wageRange.value[i];
    if (data.equal = "formDt") {
      if (ageingTemp >= data.formDt && ageingTemp < data.toDt) {
        return data.price;
      }
    } else {
      if (ageingTemp > data.formDt && ageingTemp <= data.toDt) {
        return data.price;
      }
    }
  }
}

function forecastVariable(ageingTemp: number) {
  let pre = null;
  console.log(wageRange.value)
  console.log("-------------")
  if (wageRange.value.length == 0) {
    return null;
  }
  console.log("ageingTemp   " + ageingTemp)
  if (ageingTemp == 0) {
    console.log("模拟清零！")
    forecastVariablePay.value = 0;
    forecastWeekAgeing.value = 0;
    //计算时间
    forecastWeekWorkTime.value = 0;
    forecastWeekTotalPay.value = 0;
    return 0;
  }
  for (let i in wageRange.value) {
    let data: any = wageRange.value[i];
    if (data.equal = "formDt") {
      if (ageingTemp >= data.formDt && ageingTemp < data.toDt) {
        if (pre) {
          console.log(pre)
          forecastVariablePay.value = pre.price;
          forecastWeekAgeing.value = pre.formDt;
          //最低档
          if (forecastWeekAgeing.value == 0) {
            forecastWeekAgeing.value = pre.toDt-0.1;
          }
          console.log(pre.formDt)
          console.log(forecastWeekAgeing.value)
          //计算时间
          forecastWeekWorkTime.value = Number((weekWorkNum.value/forecastWeekAgeing.value).toFixed(2));
          forecastWeekTotalPay.value = Number((forecastWeekWorkTime.value * (forecastVariablePay.value + basePay.value)).toFixed(2));
          console.log(weekWorkTime.value)
          console.log(forecastWeekWorkTime.value)
        } else {
          console.log("模拟清零！")
          forecastVariablePay.value = variablePay.value;
          forecastWeekAgeing.value = weekAgeing.value;
          //计算时间
          forecastWeekWorkTime.value = weekWorkTime.value;
          forecastWeekTotalPay.value = Number((weekWorkTime.value * (data.price + basePay.value)).toFixed(2));
          return 0;
        }
        return data.price;
      }
    } else {
      if (ageingTemp > data.formDt && ageingTemp <= data.toDt) {
        if (pre) {
          forecastVariablePay.value = pre.price;
          forecastWeekAgeing.value = pre.toDt-0.1
          //计算时间
          forecastWeekWorkTime.value = Number((weekWorkNum.value/forecastWeekAgeing.value).toFixed(2));
          forecastWeekTotalPay.value = Number((forecastWeekWorkTime.value * (forecastVariablePay.value + basePay.value)).toFixed(2));
        }
        return data.price;
      }
    }
    pre = data;
  }
}



async function backToToday() {
  weekModeRef.value.day = currentDay;
  weekModeRef.value.month = currentMonth;
  weekModeRef.value.year = currentYear;
  today.value = `${currentYear}-${currentMonth}-${currentDay}` + "";
  if (!weeks.value.includes(today.value)) {
    console.log("切换" + today.value)
    weeks.value = getWeeks(currentYear.toString(), currentMonth.toString(), currentDay.toString());

    console.log(weeks.value);
    /////await forecastWeek();
  }
  //变更数据
  let data: any = await invoke("get_info_by_date", { "date" : today.value });
  if (data.is_success || data.data) {
    workTime.value = data.data.work_time;
    workNum.value = data.data.work_num;
  } else {
    workTime.value = 0;
    workNum.value = 0;
  }
}


async function selectDate(e: any) {
  let split = e.toString().split("-");
  today.value = e;
  weekModeRef.value.day = split[2];
  weekModeRef.value.month = split[1];
  weekModeRef.value.year = split[0];
  let data: any = await invoke("get_info_by_date", { "date" : e });
  if (data.is_success) {
    workTime.value = data.data == null ? 0 : data.data.work_time;
    workNum.value = data.data == null ? 0 : data.data.work_num;
    weeks.value = getWeeks(weekModeRef.value.year, weekModeRef.value.month, weekModeRef.value.day)
  }
}

async function test(e: any, e1: any, e2: any) {
  weeks.value = getWeeks(e, e1, e2);
  /////await forecastWeek();
}




async function saveTime() {
  await forecastWeek();
}



async function saveNum() {
  await forecastWeek();
}

function getWeeks(year: string, month: string, day: string) {
  //day
  // 获取所有 class 为 vc-calendar-date 的 span 元素
  const spanElements = document.querySelectorAll('.vc-calendar-date');
  console.log(spanElements)
  // 使用 map 提取每个 span 的值，存储到一个数组中
  const spanValues = Array.from(spanElements).map(span => `${year}-${month}-` + span.textContent);

  // 创建一个空数组来存储分组后的结果
  const groupSize = 7;
  const groupedArr = [];
  // 遍历原数组，每次取 7 个元素
  for (let i = 0; i < spanValues.length; i += groupSize) {
    groupedArr.push(spanValues.slice(i, i + groupSize));
  }
  console.log("-----------")
  console.log(groupedArr)
  const date = `${year}-${month}-${day}`
  console.log(date)
  for (let i = 0; i < groupedArr.length; i++) {
    if (groupedArr[i].includes(date)) {
      return groupedArr[i];
    }
  }
  return [];
}
nextTick(async () => {
  changeRange(typePaySelect.value.code);
  ///// weeks.value = getWeeks(currentYear.toString(), currentMonth.toString(), currentDay.toString());
})

async function forecastWeek() {
  weekWorkTime.value = 0;
  weekWorkNum.value = 0;
  if (weeks.value.length == 0) {
    console.log("当前周的日期没有获取到！数据清零")
    weekWorkTime.value = 0;
    weekWorkNum.value = 0;
    weekAgeing.value = 0;
    weekVariablePay.value = 0;
    weekTotalPay.value = 0;
    forecastVariablePay.value = 0;
    forecastWeekAgeing.value = 0;
    forecastWeekWorkTime.value = 0;
    forecastWeekTotalPay.value = 0;
    return;
  }
  console.log("get_list_by_dates");
  let data: any = await invoke("get_list_by_dates", { "dates" : weeks.value });
  if (data.is_success) {
    let time = 0;
    let num = 0;
    for (let i in data.data) {
      time += data.data[i].work_time;
      num += data.data[i].work_num;
    }
    weekWorkTime.value = time;
    weekWorkNum.value = num;
    console.log("周工时：" + weekWorkTime.value);
    console.log("周绩效：" + weekWorkNum.value);
    weekAgeing.value = (weekWorkTime.value == 0) ? 0 : Number((weekWorkNum.value/weekWorkTime.value).toFixed(2));
    weekVariablePay.value = forecastVariable(weekAgeing.value);
    console.log("周浮动薪资：" + weekVariablePay.value);
    weekTotalPay.value = Number((weekWorkTime.value * (weekVariablePay.value + basePay.value)).toFixed(2));

  }
}


function setup() {
  setVariablePay.value = true;
}

  // const saveCacheFile = async (data: string) => {
  //   await writeTextFile(cacheFileName, data, { baseDir: BaseDirectory.AppData }) 
  // }




</script>


<style>
.vc-calendar-almanac {
  font-size: 10px;
  transform: translateY(3px);
}


.metrics {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background-color: white;
    border-radius: 8px;
    margin-top: 3px;
}
.metrics .metric {
    text-align: center;
}
.metrics .metric .value {
    font-size: 24px;
    font-weight: bold;
    color: #FFA500;
}
.metrics .metric .label {
    font-size: 14px;
    color: #666;
}


.metrics1 {
    display: flex;
    justify-content: space-between;
    padding-left: 8px;
    padding-right: 8px;
    background-color: white;
    border-radius: 8px;
    margin-top: 3px;
}
.metrics1 .metric {
    text-align: center;
}
.metrics1 .metric .value {
    font-size: 16px;
    font-weight: bold;
    color: #FFA500;
}
.metrics1 .metric .label {
    font-size: 14px;
    color: #666;
}
</style>